<template>
  <view class="wrap">
    <view class="key-input">
      <view class="title">输入验证码</view>
      <view class="tips">
        验证码已发送至
        {{ phone }}
      </view>
      <u-message-input
        :focus="true"
        :value="msgCode"
        @change="change"
        @finish="finish"
        mode="bottomLine"
        :maxlength="maxlength"
        :bold="true"
        :hairline="false"
      ></u-message-input>
      <text :class="{ error: error }">{{ result.msg }}</text>
      <view class="captcha">
        <text :class="{ regain: !show }">{{ second }}秒后重新获取验证码</text>
      </view>
			<view class="reget-code"  v-if="show && !error">
        <text>重新获取验证码</text>
      </view>
    </view>
  </view>
</template>

<script>
import { postAppSendSms } from "@/api";
export default {
  data() {
    return {
      maxlength: 6,
      msgCode: "",
      // 短信验证码重新获取倒计时
      second: 6,
      show: false,
      error: false,
      // 验证结果
      result: {
        msg: "验证码错误，请重新输入",
        code: 0,
      },
      // 上一个页面传递过来的事件名参数
      prepageEventName: "message-check",
      // 上一个页面传递过来的手机号参数
      tel: "",
      // 验证码id
      codeId: "",
      // 定时器
      interval: null,
    };
  },
  computed: {
    phone() {
      // 对手机号进行敏感信息处理
      const tel = this.tel;
      const telArr = tel.split("");
      const telArr2 = [];
      for (let i = 0; i < telArr.length; i++) {
        if (i < 3 || i > telArr.length - 4) {
          telArr2.push(telArr[i]);
        } else {
          telArr2.push("*");
        }
      }
      return telArr2.join("");
    },
  },
  onLoad(opt) {
    this.prepageEventName = opt.eventName;
    this.tel = opt.tel;
    if (!opt.tel) {
      return uni.showToast({
        title: "手机号不能为空",
      });
    }
    this.getCaptcha();
  },
  methods: {
		// 获取验证码
    async getCaptcha() {
      try {
        const pam = {
          phone: this.tel,
          smsType: 1,
          // roleId: .roleId,
        };
        // const { data } = await postAppSendSms(pam);
				const data = {id:"xxxx",}
        this.codeId = data.id;
        console.log("postAppSendSms", data);
				uni.showToast({title: '已发送，请注意查收..', icon: 'none'})
        // 执行倒计时
        this.interval = setInterval(() => {
          this.second--;
          if (this.second <= 0) {
            this.show = true;
            if (this.msgCode.length != this.maxlength) {
              this.error = true;
            }
            clearInterval(this.interval);
          }
        }, 1000);
      } catch (error) {
        console.error(error);
      }
    },
    // change事件侦听
    change(value) {
      // console.log('change', value);
    },
    // 输入完验证码最后一位执行
    finish(value) {
      console.log("finish", value);
      // 验证验证码

      // 通知事件接收页进行短信校验，并返回用户输入的校验码和短信id等信息
      uni.$emit(this.prepageEventName, {input: value, phone: this.tel, codeId: this.codeId});

			// 不返回，由事件接收页处理
      // uni.navigateBack({
      //   success: () => {
      //     // 这里 prepageEventName 已经被销毁了
      //     // uni.$emit(this.prepageEventName, this.result);
      //   },
      // });
    },
		// 更新提示消息
		updateMsg({code, msg}) {
			this.result = {code, msg};
		}
  },
	onUnload() {
		clearInterval(this.interval);
	},
};
</script>

<style lang="scss" scoped>
.wrap {
	min-height: 100vh;
  padding: 60rpx;
	background-color: white;
}

.box {
  margin: 20rpx 0;
  font-size: 30rpx;
  color: 555;
}

.key-input {
  padding: 20rpx 0;
  text {
    display: none;
  }
  .error {
    display: block;
    color: red;
    font-size: 30rpx;
    margin: 20rpx 0;
  }
}

.title {
  font-size: 50rpx;
  color: #333;
}

.key-input .tips {
  font-size: 30rpx;
  color: #333;
  margin-top: 20rpx;
  margin-bottom: 60rpx;
  color: $uni-text-color-grey;
}

.captcha {
  color: $uni-color-warning;
  font-size: 30rpx;
  margin-top: 40rpx;
  .noCaptcha {
    display: block;
  }
  .regain {
    display: block;
  }
}

.reget-code{
	color: $uni-color-primary;
}
</style>
